<template>
    <div class="text_group">
        <!-- 组件结构 -->

        <!-- 组件容器 -->
        <div class="input_group" :class="{'is-invalid':error}" >
            <!-- 输入框 -->
            <!-- $event.target.value 表示执行这个事件时传递的参数 -->
            <input 
                :type="type" 
                :value="value" 
                :placeholder="placeholder" 
                :name="name"
                @input="$emit('update:value',$event.target.value)">
            <!-- 输入框后面的按钮 -->
            <!-- 
                要想在外部触发组件里面的方法就要定义事件 
                @click="$emit('btnclick')"
            -->
            <button 
              v-if="btnTitle" :disabled="disabled" 
              @click="$emit('btnclick')">{{btnTitle}}
            </button>

        </div>
        <!-- 错误提醒 -->
        <div v-if="error" class="invalid-feedback" >{{error}}</div>
    </div>
</template>

<script>
    export default {
        data() {
          return{
            
          }
        },
        name: "inputGroup",
        // 接收父组件传递的参数  并进行类型校验
        props: {
            type: {
                type: String,
                dafault: "text",
            },
            value: String,
            placeholder: String,
            name:String,
            btnTitle: String,
            disabled: Boolean,
            error: String
        }

    }
</script>

<style scoped>
    
    .input_group {
        width: 300px;
        margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.input_group input {
  height: 100%;
  width: 60%;
  outline: none;
}
.input_group button {
  border: none;
  outline: none;
  background: #fff;
}
.input_group button[disabled] {
  color:black;
}
.is-invalid {
  border: 1px solid red;
}
.invalid-feedback {
  color: red;
  padding-top: 5px;
}
</style>